<template>
  <header class="index-header">
    <div @click="goGetPosi">
      <span class="iconfont icon-dingwei"></span>
      <address id="address">
        <strong class="address-name">{{positionInfo.content}}</strong>
      </address>
      <span class="iconfont icon-sanjiaoxia"></span>
    </div>
    <div class="input-box flex-row-center" @click="searchShop">
      <span class="iconfont icon-sousuo"></span>
      <p class="base-font-size ellipsis">搜索饿了么商家、商品名称</p>
    </div>
  </header>
</template>

<script>
import { selectPosi, getAddrShopInfo } from '@/api/elm-data'
export default {
  name: 'index-header',
  data() {
    return {
      positionInfo: {
        content: '...正在定位',
        lat: '',
        lng: ''
      },
      mapKey: '5OWBZ-QQB6K-IL5JP-A4R66-4RTZS-RMBG5',
      geolocation: undefined
    }
  },
  created() {
    this.positionInfo.content = window.sessionStorage.getItem('posi-name') || '...正在定位'
    window.sessionStorage.getItem('position')&&this.stopLoading()
    if(!window.sessionStorage.getItem('once')) {
      window.sessionStorage.setItem('once', 'Y')
      const geolocation = new qq.maps.Geolocation(this.mapKey, "myapp")
      geolocation.getLocation(async option => {
        this.stopLoading()
        this.$store.commit('currentGeo', { latitude: option.lat, longitude: option.lng})
        if(option.city === '') {
          this.positionInfo.content = '未知定位'
          window.sessionStorage.setItem('position', 'failed')
          window.sessionStorage.setItem('posi-name', '未知定位')
          this.$router.push('/getposition')
        }else {
          window.sessionStorage.setItem('position', 'success')
          window.sessionStorage.setItem('posi-name', option.province + option.city)
          this.positionInfo.content = option.province + option.city
          this.positionInfo.lng = option.lng
          this.positionInfo.lat = option.lat
          const { data } = await selectPosi(option.lat, option.lng)
          const { data: res } = await getAddrShopInfo(option.lat, option.lng)
          window.sessionStorage.setItem('index-data', JSON.stringify({data, res}))
        }
      }, () => {
        this.stopLoading()
        window.sessionStorage.setItem('position', 'failed')
        window.sessionStorage.setItem('posi-name', '定位失败')
        this.$router.push('/getposition')
      }, {
        timeout: 10000
      })
    }else {
    }
  },
  methods: {
    searchShop() {
      if(!this.$store.state.token) {
        this.$router.push('/login')
      }else if(!window.sessionStorage.getItem('Geo')){
        this.$router.push('/getposition')
      }else {
        this.$route.query
        this.$router.push({ name: 'searchshop', query: this.$route.query})
      }
    },
    stopLoading() {
      this.$nextTick(() => {
        document.querySelector('.position-failed').style.display = 'none'
      })
    },
    goGetPosi() {
      this.$router.push('/getposition')
    }
  }
}
</script>

<style scoped>
  .index-header {
    margin-top: 0;
    padding: 40px 15px 10px;
    background-color: #0097FF;
    color: #fff;
    position: sticky;
    top: -90px;
    left: 0;
    z-index: 999;
  }
  .margin-top {
    margin-top: -100px;
  }
  #address {
    display: inline-block;
    margin: 0 10px;
    max-width: 80%;
    font-size: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .icon-dingwei {
    font-size: 30px;
  }
  .icon-sanjiaoxia {
    font-size: 22px;
  }
  .input-box {
    height: 60px;
    width: 80%;
    margin: 20px auto 0;
    background-color: #fff;
    color: #999999;
  }
  .icon-sousuo {
    font-size: 28px;
  }
</style>
